import React from 'react';
import { connect } from 'dva';
import styles from './Login.less';
import PropTypes from 'prop-types'
import { Button, Row, Form, Input, Icon, Checkbox, Layout, Modal  } from 'antd'
import config from '../../utils/config.js'
import QueueAnim from 'rc-queue-anim'
const confirm = Modal.confirm;
const FormItem = Form.Item

const Login = ({

  form: {
    getFieldDecorator,
    validateFieldsAndScroll
  }
}) => {
  const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };

  function handleOk (e) {
    e.preventDefault()
    validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }else{
        confirm({
        title: '欢迎您进入蓝海后台管理系统',
        content: '信息正发送至系统管理员，请耐心等待，管理员会与您联系！',
        iconType:'smile-o',
        onOk() {
          return new Promise((resolve, reject) => {
              setTimeout(Math.random() > 0.5 ? resolve : reject, 3000);
          }).then((resolve)=>{
            location=`${location.origin}/login`
          }).catch(() => {
            location=`${location.origin}/login`;
            console.log('Oops errors!')
          });

        },
        onCancel() {},
    });

      }
    })
  }

  return (
    <div>

      <div style={{
        zIndex:10,
        height:'100vh',
        position: 'absolute',
        top: '50%',
        left: '45%',
        margin:' -160px 0 0 -160px',
        width: '480px',
        height: '320px',
        padding: '36px',
      }}>

        <form onSubmit={handleOk}>
          <QueueAnim delay={500} type='top'>
            <FormItem  key='1' label='用户名' {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请填写用户名'
                  }
                ]
              })(
                <Input prefix={<Icon type="user" />} size='large' />
              )}
            </FormItem>
            <FormItem  key='2' label='新密码' {...formItemLayout}>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请填写密码'
                  }
                ]
              })(
                <Input prefix={<Icon type = "lock" />} size='large' type='password' />
              )}
            </FormItem>
            <FormItem hasFeedback key='3' label='确认密码' {...formItemLayout}>
              {getFieldDecorator('repassword', {
                rules: [
                  {
                    required: true,
                    message: '请确认密码'
                  }
                ]
              })(
                <Input prefix={<Icon type = "lock" />} size='large' type='repassword'  />
              )}
            </FormItem>
            <div style={{width: '480px',paddingLeft:'40%',marginTop:'50px'}}>
              <Button type='primary' htmlType='submit' size='large' >
                提交
              </Button>
            </div>

          </QueueAnim>
        </form>
      </div>

    </div>

  );
}

//数据类型校验
Login.propTypes = {
  form: PropTypes.object,
  loginButtonLoading: PropTypes.bool,
  onOk: PropTypes.func
}

export default Form.create()(Login);
